Adwaita: ease-out-quad in place of ease-out
authorLapo Calamandrei <calamandrei@gmail.com>
Thu, 16 Oct 2014 12:36:23 +0000 (14:36 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Thu, 16 Oct 2014 12:36:23 +0000 (14:36 +0200)
Generally changed the transition timing function to ease-out-quad
which is described by cubic-bezier(0.25, 0.46, 0.45, 0.94), feels
better to me.

gtk/resources/theme/Adwaita/_common.scss
gtk/resources/theme/Adwaita/gtk-contained-dark.css
gtk/resources/theme/Adwaita/gtk-contained.css

index 030781f49a923c78f6c53b7c4e42b0644ea9ff0d..086556707ff32db9ffa171637a635e3bb24b5953 100644 (file)
@@ -2,6 +2,8 @@
   @return unquote("alpha(#{$c},#{$a})");
 }
 
+$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
 * {
   padding: 0;
   -GtkToolButton-icon-spacing: 4;
@@ -244,7 +246,7 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
   }
 
   border-radius: 3px;
-  transition: all 200ms ease-out;
+  transition: all 200ms $ease-out-quad;
   @include entry(normal);
 
   &.flat, &.flat:focus {
@@ -429,7 +431,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
 
 .button {
 
-  $_button_transition: all 200ms ease-out;
+  $_button_transition: all 200ms $ease-out-quad;
 
   border: 1px solid;
   border-radius: 3px;
@@ -1548,7 +1550,7 @@ column-header.button.dnd { // for treeview-like derive widgets
   -GtkNotebook-has-tab-gap: false;
   -GtkWidget-focus-padding: 0;
   -GtkWidget-focus-line-width: 0;
-  transition: all 200ms ease-out;
+  transition: all 200ms $ease-out-quad;
   &:backdrop {
     background-color: $backdrop_base_color;
   }
@@ -2487,7 +2489,7 @@ GtkScrolledWindow {
 
 // transition
 .list-row, list-row.button {
-  transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: all 300ms $ease-out-quad;
   &:hover { transition: none; }
 }
 
index 7f103833ec01306f87d55338e1caf50649491b6d..e86a4a2d26ccbe2d8a989ef213d0f1a7a439a466 100644 (file)
@@ -168,7 +168,7 @@ GtkTextView {
   border: 1px solid;
   padding: 5px 8px 6px;
   border-radius: 3px;
-  transition: all 200ms ease-out;
+  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   background-color: transparent;
   background-image: linear-gradient(to bottom, #212121, #292929 90%);
   border-color: #1c1f1f;
@@ -391,7 +391,7 @@ GtkCalendar.header .button.titlebutton {
   border: 1px solid;
   border-radius: 3px;
   padding: 5px 8px 6px;
-  transition: all 200ms ease-out;
+  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   color: #eeeeec;
   outline-color: rgba(238, 238, 236, 0.3);
   border-color: #1c1f1f;
@@ -412,12 +412,12 @@ GtkCalendar.header .button.titlebutton {
     .button.flat:hover, .header-bar .titlebutton.button:hover,
     .titlebar .titlebutton.button:hover,
     GtkCalendar.header .titlebutton.button:hover {
-      transition: all 200ms ease-out;
+      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
       transition-duration: 500ms; }
       .button.flat:hover:active, .header-bar .titlebutton.button:hover:active,
       .titlebar .titlebutton.button:hover:active,
       GtkCalendar.header .titlebutton.button:hover:active {
-        transition: all 200ms ease-out; }
+        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   .button:hover, .header-bar .button.titlebutton:hover,
   .titlebar .button.titlebutton:hover,
   GtkCalendar.header .button.titlebutton:hover {
@@ -2194,7 +2194,7 @@ GtkCalendar.header column-header .button.titlebutton, column-header .button:hove
   -GtkNotebook-has-tab-gap: false;
   -GtkWidget-focus-padding: 0;
   -GtkWidget-focus-line-width: 0;
-  transition: all 200ms ease-out; }
+  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   .notebook:backdrop {
     background-color: #2c2c2c; }
   .notebook.frame {
index edb473e40dd93f023949e53c97a9259e76206e58..fe037ba5e4add656439e0784770b21a478f448c5 100644 (file)
@@ -168,7 +168,7 @@ GtkTextView {
   border: 1px solid;
   padding: 5px 8px 6px;
   border-radius: 3px;
-  transition: all 200ms ease-out;
+  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   background-color: transparent;
   background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
   border-color: #a1a1a1;
@@ -383,7 +383,7 @@ GtkCalendar.header .button.titlebutton {
   border: 1px solid;
   border-radius: 3px;
   padding: 5px 8px 6px;
-  transition: all 200ms ease-out;
+  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   color: #2e3436;
   outline-color: rgba(46, 52, 54, 0.3);
   border-color: #a1a1a1;
@@ -404,12 +404,12 @@ GtkCalendar.header .button.titlebutton {
     .button.flat:hover, .header-bar .titlebutton.button:hover,
     .titlebar .titlebutton.button:hover,
     GtkCalendar.header .titlebutton.button:hover {
-      transition: all 200ms ease-out;
+      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
       transition-duration: 500ms; }
       .button.flat:hover:active, .header-bar .titlebutton.button:hover:active,
       .titlebar .titlebutton.button:hover:active,
       GtkCalendar.header .titlebutton.button:hover:active {
-        transition: all 200ms ease-out; }
+        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   .button:hover, .header-bar .button.titlebutton:hover,
   .titlebar .button.titlebutton:hover,
   GtkCalendar.header .button.titlebutton:hover {
@@ -2191,7 +2191,7 @@ GtkCalendar.header column-header .button.titlebutton, column-header .button:hove
   -GtkNotebook-has-tab-gap: false;
   -GtkWidget-focus-padding: 0;
   -GtkWidget-focus-line-width: 0;
-  transition: all 200ms ease-out; }
+  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   .notebook:backdrop {
     background-color: #fcfcfc; }
   .notebook.frame {